<template>
  <a-row
    class="grid-demo"
    style="margin-bottom: 16px"
    align="center"
    :wrap="false"
  >
    <a-col flex="auto">
      <div class="menu-demo">
        <a-menu
          mode="horizontal"
          :selected-keys="selectedKeys"
          @menu-item-click="navigatorTo"
        >
          <a-menu-item
            key="0"
            :style="{ padding: 0, marginRight: '38px' }"
            disabled
          >
            <div class="title-bar">
              <img class="logo" src="../assets/vue.svg" />
              <div class="title">eleme_Admin</div>
            </div>
          </a-menu-item>
          <a-menu-item v-for="route in visibleRoute" :key="route.path"
            >{{ route.name }}
          </a-menu-item>
        </a-menu>
      </div>
    </a-col>
    <a-col flex="100px" @click="router.push('/user/login')">
      <div>{{ userName }}</div>
    </a-col>
  </a-row>
</template>
<script setup lang="ts">

import { useRouter } from "vue-router";
import { computed, ref } from "vue";
import {userStore} from "../store/user.ts";
import {routes} from "../router/routes.ts";
import checkAccess from "../access/checkAccess.ts";

const router = useRouter();
//获取状态变量
const store = userStore();

//把需要在展示在菜单的路由过滤出来
//设置动态属性或者用reactive响应式数据
const visibleRoute = computed(() => {
  return routes.filter((item) => {
    //需要隐藏的就进行剔除
    if (item.meta?.isHidden) {
      return false;
    }
    //根据权限过滤菜单
    //比对页面访问权限和当前用户权限进行放行
    return checkAccess(store.loginUser, item.meta?.access as string);

  });
});

//默认路由
const selectedKeys = ref(["/"]);
//路由跳转后改变高亮
router.afterEach((to) => {
  selectedKeys.value = [to.path];
});

//路由跳转
const navigatorTo = (key: string) => {
  //输入的key默认就是a-menu-item的key属性
  router.push({
    path: key,
  });

};

const userName = computed(() => {
    if (store.loginUser.userName){
        return store.loginUser.userName;
    }else {
        return "未登录";
    }
});
</script>
<style scoped>
.menu-demo {
  box-sizing: border-box;
  width: 100%;
  background-color: var(--color-neutral-2);
}

.title-bar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 48px;
}

.title {
  padding-left: 16px;
  color: #444;
}
</style>
